<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问内容</title>
    <script>
        function f1(){
            let d1 = document.getElementById("d1");
            // 获取标签体内容有两种方式
            // 取值时
            // innerText:不识别标签,只能获取到文本内容,无法获取标签
            // innerHTML:识别标签,可以获取到文本与标签
            console.log(d1.innerText)

            // 赋值时同样使用上面的两种方式
            // innerText:不识别标签,会将标签作为普通文本在页面中展示
            // innerHTML:识别标签,会在页面中展示对应的标签效果
            d1.innerText = "<h2>这是新的内容</h2>";
        }
        function f2(){
            let d2 = document.getElementById("d2");
            console.log(d2.innerHTML)
            d2.innerHTML = "<h2>这是新的内容</h2>";
        }
    </script>
</head>
<body>
<div id="d1" style="width: 400px;height: 100px;background-color: red;" onclick="f1()">
    <h2>这是第一个div中的标题</h2>
</div>
<hr>
<div id="d2" style="width: 400px;height: 100px;background-color: green;" onclick="f2()">
    <h2>这是第二个div中的标题</h2>
</div>
</body>
</html>